<script setup lang="ts">
import type { GunCunJiLu } from '~/api/services/main.api';
import { useLockTypeAndStatu } from '../../ts/useLockTypeAndStatu';
import { dateToDayjs } from '../../ts/utils';

const props = defineProps<{ detailData?: GunCunJiLu; updateList?: () => void; onClose?: () => void }>();

const { getText, RenderStatu } = useLockTypeAndStatu();

const getIsShowWaiverActivityRef = computed(() => {
  const data = props.detailData;
  return data?.type === 2 && data?.order_no && [1, 2].includes(data?.status ?? 888);
});

function toValFormat(val?: Parameters<typeof bignumber>[0], showSuffix = true) {
  const bn = bignumber(val || 0);
  const text = bn.isNaN() ? bignumber(0).toFormat() : bn.toFormat();
  return `${text} ${showSuffix ? props.detailData?.currency?.currency ?? '' : ''}`.trim();
}

const router = useRouter();

function toGames() {
  router.push(buildGameListRoute({ alias: 'bonus' })).then(() => props.onClose?.());
}

function waiverActivity() {
  if (!getIsShowWaiverActivityRef.value)
    return;
  const m = antdModal.confirm({
    content: $t('u_4s22wqiSdKuDoAmnvt'),
    class: 'ant-cover__confirm-modal',
    centered: true,
    zIndex: 999,
    async onOk() {
      try {
        await apis.apiFundDepositScrollCancel({ requestBody: { order_no: props.detailData?.order_no ?? '' } });
        antdMessage.success($t('doif88MhYgjrXeiRjoVfU'));
        m.destroy();
        props.updateList?.();
        useCurrencyStore().balanceQry.refetch();
        return { status: 9 };
      }
      catch (error) {
        return error;
      }
    },
  });
}
</script>

<template>
  <div class="w-full text-sm text-sys-text-body">
    <div class="flex-center gap-1 text-2xl text-sys-text-head font-semibold">
      <TCurrencyIcon :symbol="detailData?.currency?.currency" size="24px" />
      <div>+{{ toValFormat(detailData?.amount) }}</div>
    </div>
    <div class="grid grid-cols-[auto_1fr] my-3 w-full gap-2.5 rounded-lg bg-sys-layer-a p-3 shadow-[0px_-4px_0px_0px_#00000040_inset]">
      <div>{{ $t('uDa_6vn6ig3MfTvVtIeh') }}</div>
      <div class="flex flex-col items-end">
        <RenderStatu :statu="detailData?.status" :isText="false" />
      </div>

      <div>{{ $t('zNzvY7jS3VnX72MbO4nbV') }}</div>
      <div class="text-right text-sys-text-head">
        {{ getText(detailData?.type) }}
      </div>

      <template v-if="detailData?.type === 2">
        <div>{{ $t('1QUdY7Pnkm6SkGpcWxToA') }}</div>
        <div class="cursor-pointer text-right text-green-500 underline" @click="toGames">
          {{ $t('can51ims5Hsc5PhKmvfS') }}
        </div>
      </template>

      <div>{{ $t('p4RvmmNvIgIlTJxdPzZl') }}</div>
      <div class="text-right text-sys-text-head">
        {{ dateToDayjs(detailData?.create_time)?.format('M/D/YYYY h:mm:ss A') ?? "-" }}
      </div>

      <template v-if="detailData?.type === 2">
        <div>{{ $t('nbU2eK7KvdGbnmFpSmG') }}</div>
        <div class="text-right text-sys-text-head">
          {{ dateToDayjs(detailData?.expired_time)?.format('M/D/YYYY h:mm:ss A') ?? "-" }}
        </div>
      </template>

      <div class="col-span-full divider-h-gradual my-1" />

      <div>{{ $t('tcjXpq8DaNqPReRvgqRac') }}</div>
      <div class="text-right text-sys-text-head">
        {{ toValFormat(detailData?.deposit_bet_rate, false) }} X
      </div>

      <div>{{ $t('dHjTLaCvrqHxOlDreCfB') }}</div>
      <div class="text-right text-sys-text-head">
        {{ toValFormat(detailData?.deposit_bet_amount) }}
      </div>

      <div>{{ $t('cPGfGDys0uUDg2HqTtXp') }}</div>
      <div class="text-right text-sys-text-head">
        {{ toValFormat(detailData?.completed_bet_amount) }}
      </div>

      <div>{{ $t('pd1eyTHaw_7ldc94FQdd2') }}</div>
      <div class="text-right text-sys-text-head">
        {{ toValFormat(detailData?.need_bet_amount) }}
      </div>

      <div>{{ $t('1XteXuUv3I1bJviXl6qsv') }}</div>
      <div class="text-right text-sys-text-head">
        {{ toValFormat(detailData?.withdraw_amount) }}
      </div>
    </div>

    <div v-if="getIsShowWaiverActivityRef" class="mb-3 w-full flex-center">
      <div class="cursor-pointer underline" @click="waiverActivity">
        {{ $t('prEg7TViuAseUP0bVo0U') }}
      </div>
    </div>
  </div>
</template>
